<template>
    <Dialog v-model="dialogVisible" :title="dialogTitle">
      <el-form ref="formRef" v-loading="formLoading" :model="formData" :rules="formRules" label-width="150px">
        <el-form-item label="用户组名称" prop="groupName">
          <el-input v-model="formData.groupName" clearable placeholder="请输入用户组名称" style="width:300px;" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button :disabled="formLoading" type="primary" @click="submitForm" v-if="formType != '查看'">确 定</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
      </template>
    </Dialog>
  </template>
  <script lang="ts" setup>
  import * as groupApi from '@/api/infoArrive/arriveNotice/userGroup'
  import { CACHE_KEY, useCache } from '@/hooks/web/useCache'
  
  defineOptions({ name: 'GroupForm' })
  
  const { wsCache } = useCache()
  const { t } = useI18n() // 国际化
  const message = useMessage() // 消息弹窗
  
  const props = defineProps({
    groupNameId : String 
  })
  const dialogVisible = ref(false) // 弹窗的是否展示
  const dialogTitle = ref('') // 弹窗的标题
  const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
  const formType = ref('') // 表单的类型：create - 新增；update - 修改
  const formData = ref({
    id: null,
    groupName: '',
    groupType:'1'
  })
  
  const formRules = reactive({
    groupName: [{ required: true, message: '用户组名称不能为空', trigger: 'blur' }],
    responseLevel: [{ required: true, message: '请选择', trigger: 'change' }],
  })
  const formRef = ref() // 表单 Ref
  
  /** 打开弹窗 */
  const open = async (type: string,id) => {
    dialogVisible.value = true
    dialogTitle.value = type
    formType.value = type
    resetForm()
    // 修改时，设置数据
    if (props.groupNameId&&type!='新增') {
      formLoading.value = true
      try {
        formData.value = await groupApi.getGroupDetail({id,pageNo:1,pageSize:10})
      } finally {
        formLoading.value = false
      }
    }
  }
  defineExpose({ open }) // 提供 open 方法，用于打开弹窗
  
  /** 提交表单 */
  const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
  const submitForm = async () => {
    // 校验表单
    if (!formRef) return
    const valid = await formRef.value.validate()
    if (!valid) return
    // 提交请求
    formLoading.value = true
    try {
      if (formType.value === '新增') {
        await groupApi.saveGroup({ ...formData.value })
        message.success(t('common.createSuccess'))
      } else {
        await groupApi.saveGroup({ ...formData.value })
        message.success(t('common.updateSuccess'))
      }
      dialogVisible.value = false
      // 发送操作成功的事件
      emit('success')
    } finally {
      formLoading.value = false
      // 清空，从而触发刷新
      wsCache.delete(CACHE_KEY.ROLE_ROUTERS)
    }
  }
  
  /** 重置表单 */
  const resetForm = () => {
    formData.value = {
      id: null,
      groupName: '',
      groupType:'1'
    }
    formRef.value?.resetFields()
  }
  </script>
  